import React from 'react';
import { useTranslation } from 'react-i18next';
import { GlobalOutlined } from '@ant-design/icons';
import { Dropdown, Button } from 'antd';
import type { MenuProps } from 'antd';

const LanguageSwitcher: React.FC = () => {
  const { i18n, t } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
    localStorage.setItem('language', lng);
  };

  const items: MenuProps['items'] = [
    {
      key: 'en',
      label: t('language.english'),
      onClick: () => changeLanguage('en'),
    },
    {
      key: 'zh',
      label: t('language.chinese'),
      onClick: () => changeLanguage('zh'),
    },
  ];

  return (
    <Dropdown menu={{ items }} placement="bottomRight">
      <Button type="text" icon={<GlobalOutlined />}>
        {i18n.language === 'zh' ? t('language.chinese') : t('language.english')}
      </Button>
    </Dropdown>
  );
};

export default LanguageSwitcher;
